/*
 * jPhotoAlbum-0.0.1.js
 * name:小嘉
 * email:iatt@qq.com
 * qq:273142650
 * time:2012.5.22 8:07
*/

jQuery.extend({

	jPhotoAlbum: {

		data: {

			template: null,

			imageList: null,

			imageData: null,

			templateData: null,

			showDom: {

				body: null,

				style: null

			},

			canvasWidth: null,

			canvasHeight: null

		},

		template: function () {

			if (this.data.templateData == null) {

				$.ajax({

					type: 'GET',

					url: this.data.template,

					cache: false,

					dataType: 'xml',

					async: false,

					success: function (xmlHttp) {

						$.jPhotoAlbum.data.templateData = $(xmlHttp).find('template');

						$.jPhotoAlbum.config();

					}

				});

			}

		},

		config: function () {

			var xmlHttp = this.data.templateData;

			this.data.templateData = {

				template: xmlHttp,

				style: xmlHttp.find('style'),

				body: xmlHttp.find('body'),

				config: xmlHttp.find('config'),

				url: this.data.template.replace(/[\w\.]+$/ig, '')

			}

			this.replace();

		},

		getConfig: function (key) {

			return this.data.templateData.config.find('add[key=' + key + ']').attr('value');

		},

		replace: function () {

			var url = this.data.templateData.url;

			var style = this.data.templateData.style;

			style.text(function (i, c) {

				return c.replace(/{root}/ig, url);

			});

		},

		showTemplate: function () {

			$('body,html').css({

				overflow: 'hidden',

				margin: '0'

			});

			this.data.showDom.style = $('<style>' + this.data.templateData.style.text() + '</style>').appendTo(document.body);

			this.data.showDom.body = $('<div></div>').appendTo(document.body);

			this.data.showDom.body.css({

				top: 0,

				left: 0,

				width: $(window).width() + 'px',

				height: $(window).height() + 'px',

				position: 'absolute',

				background: '#000',

				overflow: 'hidden',

				zIndex: 9999999

			});

			this.data.showDom.body.html(this.data.templateData.body.text());

			$(window).scrollTop(0);

			this.browserSize();

		},

		browserSize: function () {

			var fn = this;

			$(window).resize(

				function () {

					fn.data.showDom.body.css({

						width: $(window).width(),

						height: $(window).height()

					});

					fn.fn.config('images-list-img').css('width', fn.fn.listWidth() + 'px');

					fn.images();

					$(this).scrollTop(0);

				}

			);

			$(window).scroll(

                function () {

                	$(this).scrollTop(0);

                }

            );

		},

		loadImage: function () {

			var fn = this;

			$.ajax({

				type: 'GET',

				url: $.jPhotoAlbum.data.imageList,

				cache: false,

				dataType: 'xml',

				success: function (xmlHttp) {

					fn.data.imageData = $(xmlHttp).find('image');

					fn.insertList();

					fn.fn.toggle();

					fn.images();

				}

			});

		},

		insertList: function () {

			var fn = this;

			var add = this.data.imageData.find('add');

			fn.fn.config('images-list-ul').css('width', add.size() * fn.getConfig('images-list-li-width') + 'px');

			add.each(

				function () {

					var html = fn.data.templateData.config.find('add[key=images-list-ul]').text().replace(/{url}/ig, $(this).attr('thumbnail')).replace(/{title}/ig, $(this).attr('title')).replace(/{width}/ig, $(this).attr('width')).replace(/{height}/ig, $(this).attr('height'));

					var dom = $(html).appendTo(fn.getConfig('images-list-ul'));

					fn.drawImage(dom.find('img'), dom.find('img').attr('width'), dom.find('img').attr('height'), 78, 78);

					dom.css('opacity', 0.5);

					if ($(this).attr('default') == 1) {

						fn.setDefault(dom, $(this).index());

					}

				}

			);

			var imageList = $(fn.getConfig('images-list-ul'));

			if (imageList.find('li:[class=' + fn.getConfig('images-list-img-selected') + ']').size() == 0 && add.size() > 0) {

				fn.setDefault(imageList.find('li:eq(0)'), 0);

			}

		},

		setDefault: function (dom, index) {

			$(this.getConfig('images-loading')).hide();

			this.fn.toImageSrc(index);

			dom.css('opacity', 1);

			dom.addClass(this.getConfig('images-list-img-selected'));

		},

		images: function () {

			var fn = this;

			var image = fn.fn.config('images-img-div');

			this.data.canvasWidth = this.fn.config('images').width();

			this.data.canvasHeight = this.fn.config('images').height() - this.fn.config('album-bottom').height();

			fn.drawImage(fn.fn.config('images-img-div'), image.find('img').attr('width'), image.find('img').attr('height'), this.data.canvasWidth, this.data.canvasHeight);

			image.css({

				top: this.data.canvasHeight / 2 - image.height() / 2 + 'px',

				left: this.data.canvasWidth / 2 - image.width() / 2 + 'px',

				cursor: 'auto'

			});

			fn.fn.state.original = true;

		},

		drawImage: function (dom, width, height, fitWidth, fitHeight) {

			if (width > 0 && height > 0) {

				if (width / height >= fitWidth / fitHeight) {

					if (width > fitWidth) {

						$(dom).css('width', fitWidth + 'px');

						$(dom).css('height', (height * fitWidth) / width + 'px');

					} else {

						$(dom).css('width', width + 'px');

						$(dom).css('height', height + 'px');

					}

				} else {

					if (height > fitHeight) {

						$(dom).css('height', fitHeight + 'px');

						$(dom).css('width', (width * fitHeight) / height + 'px');

					} else {

						$(dom).css('width', width + 'px');

						$(dom).css('height', height + 'px');

					}

				}

			}

		},

		drag: function (obj) {

			var fn = this;

			var drag = false;

			var obj = $(obj);

			obj.css('position', 'absolute');

			obj.mousedown(function (e) {

				var dY, dX;

				dY = e.pageY - obj.offset().top;

				dX = e.pageX - obj.offset().left;

				if (!$.browser.msie) {

					if ((Math.abs(fn.fn.state.rotation) / 90) % 2 > 0) {

						dY = e.pageY - obj.offset().top - ((obj.width() - obj.height()) / 2);

						dX = e.pageX - obj.offset().left + ((obj.width() - obj.height()) / 2);

					}

				}

				drag = true;

				$(document).mousemove(function (e) {

					if (drag && !fn.fn.state.original) {

						var mY, mX;

						mY = e.pageY - dY;

						mX = e.pageX - dX;

						obj.css({

							top: mY + 'px',

							left: mX + 'px'

						});

					}

				});

				$(document).mouseup(function () {

					drag = false;

				});

			});

		},

		load: function (list) {

			if (typeof list != 'undefined' && this.data.template != null) {

				this.data.imageList = list;

				this.template();

				this.showTemplate();

				this.fn.init();

				this.loadImage();

			}

		},

		fn: {

			init: function () {

				this.close();

				this.listButton();

				this.listLeft();

				this.listRight();

				this.original();

				this.rotationLeft();

				this.rotationRight();

				this.imageLeft();

				this.imageRight();

			},

			state: {

				original: true,

				rotation: 0,

				ieRotation: 0,

				imageList: false

			},

			imageLeft: function () {

				var fn = this;

				fn.config('images-left').click(

						function () {

							var li = fn.config('images-list-li');

							var index = li.siblings('[class=selected]').index();

							var len = li.size() - 1;

							index--;

							if (index < 0) {

								li.siblings().eq(len).click();

							} else {

								li.siblings().eq(index).click();

							}

						}

					);

			},

			imageRight: function () {

				var fn = this;

				fn.config('images-right').click(

						function () {

							var li = fn.config('images-list-li');

							var index = li.siblings('[class=selected]').index();

							var len = li.size() - 1;

							index++;

							if (index > len) {

								li.siblings().eq(0).click();

							} else {

								li.siblings().eq(index).click();

							}

						}

					);

			},

			rotationLeft: function () {

				var fn = this;

				fn.config('rotation-left').click(

						function () {

							fn.rotation(1);

						}

					);

			},

			rotationRight: function () {

				var fn = this;

				fn.config('rotation-right').click(

						function () {

							fn.rotation(0);

						}

					);

			},

			rotation: function (t) {

				var fn = this;

				var img = fn.config('images-img-div');

				var d = 0, ie = 0;

				if (t == 1) {

					d = fn.state.rotation - 90;

					ie = 4 - Math.abs(fn.state.ieRotation - 1);

					fn.state.ieRotation--;

				} else if (t == 0) {

					d = fn.state.rotation + 90;

					ie = fn.state.ieRotation + 1;

					fn.state.ieRotation++;

				} else {

					d = 0;

					ie = 0;

				}

				if (Math.abs(fn.state.ieRotation) > 3) {

					fn.state.ieRotation = 0;

				}

				img.css('-webkit-transform', 'rotate(' + d + 'deg)');

				img.css('-moz-transform', 'rotate(' + d + 'deg)');

				img.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + ie + ')');

				fn.state.rotation = d;

				fn.dom().images();

			},

			listLeft: function () {

				var fn = this;

				var list = fn.config('images-list-img');

				fn.config('images-list-left-a').click(

						function () {

							var obj = $(this);

							list.stop();

							obj.fadeOut(150);

							list.animate({

								scrollLeft: fn.config('images-list-img').scrollLeft() - fn.config('images-list-img').width()

							}, 1500, function () {

								obj.fadeIn(150);

							});

						}

					);

			},

			original: function () {

				var fn = this;

				fn.config('rotation-original').click(

						function () {

							var img = fn.config('images-img-div');

							if (fn.state.original) {

								img.css({

									width: img.find('img').attr('width') + 'px',

									height: img.find('img').attr('height') + 'px',

									cursor: 'move'

								});

								fn.state.original = false;

							} else {

								fn.dom().images();

							}

							img.css('left', fn.dom().data.canvasWidth / 2 - img.width() / 2 + 'px');

							fn.dom().drag(img);

						}

					);

			},

			listRight: function () {

				var fn = this;

				var list = fn.config('images-list-img');

				fn.config('images-list-right-a').click(

						function () {

							var obj = $(this);

							list.stop();

							obj.fadeOut(150);

							list.animate({

								scrollLeft: fn.config('images-list-img').scrollLeft() + fn.config('images-list-img').width()

							}, 1500, function () {

								obj.fadeIn(150);

							});

						}

					);

			},

			toggle: function () {

				fn = this;

				fn.config('images-list-li').click(

						function () {

							fn.config('images-list-li').fadeTo(0, 0.5);

							$(this).fadeTo(250, 1);

							var selelcted = fn.dom().getConfig('images-list-img-selected');

							fn.config('images-list-li').removeClass(selelcted);

							$(this).addClass(selelcted);

							fn.toImageSrc($(this).index());

						}

					);

			},

			toImageSrc: function (index) {

				var fn = this;

				var img = fn.config('images-img');

				fn.config('images-img-div').fadeOut(50, function () {

					var dom = fn.dom().data.imageData.find('add:eq(' + index + ')');

					img.attr('width', dom.attr('width'));

					img.attr('height', dom.attr('height'));

					img.attr('src', dom.attr('url'));

					fn.dom().images();

					fn.state.rotation = 0;

					fn.rotation();

					$(this).fadeIn(50);

				});

			},

			config: function (key) {

				return $(this.dom().getConfig(key));

			},

			dom: function () {

				return $.jPhotoAlbum;

			},

			listButton: function () {

				var fn = this;

				var obj = this.config('images-list-button');

				obj.click(

						function () {

							var hideClass = fn.dom().getConfig('images-list-button-hide');

							obj.toggleClass(hideClass);

							if (!$(this).hasClass(hideClass)) {

								fn.listHide();

							} else {

								fn.listShow();

							}

						}

					);

			},

			listHide: function () {

				var fn = this;

				fn.config('images-list-img').animate({

					width: 0

				}, function () {

					fn.config('images-list').fadeOut();

				});

			},

			listShow: function () {

				var fn = this;

				var width = this.listWidth();

				fn.config('images-list-img').css('width', 0);

				fn.config('images-list').fadeIn(function () {

					fn.config('images-list-img').animate({

						width: width + 'px'

					});

				});

			},

			listWidth: function () {

				var fn = this;

				return $(window).width() - fn.config('images-list-left').width() - fn.config('images-list-right').width();

			},

			close: function () {

				var fn = this;

				this.config('close').click(

					function () {

						fn.dom().data.showDom.body.remove();

						fn.dom().data.showDom.style.remove();

						$(window).unbind("scroll");
							
						$('body,html').css({

							overflow: '',

							margin: ''

						});

					}

				);

			}

		}

	}

});